<template>
    <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    :modal="true"
    :destroy-on-close="true"
    :append-to-body="true"
    :title="$t('custom.reports.managetags')"
  >
  <div class="body">
    <div class="tag_item" v-for="(item,index) in dataTagList" :key="index">
      <input v-model="item.name" class="input" @blur="editTag(item)" :disabled="loading"> <i class="el-icon-delete cursor" @click="deleteTag(item)"></i>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSave">Save</el-button>
  </span>
  </el-dialog>
</template>

<script>
import { editTag, deleteTag } from '@/api/new'
import bus from '@/components/storybook/utilties/bus'
export default {
  data() {
    return {
      visible: false,
      dataTagList: [],
      loading: false 
    }
  },
  props: {
    tags: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    init() {
      this.visible = true
      this.dataTagList = JSON.parse(JSON.stringify(this.tags))
    },
    async editTag(item) {
      let tagObj = this.tags.find(i => i.id === item.id)
      if (tagObj&&tagObj.name === item.name) {
        return 
      }
      if (item.name.trim().length<=0) {
        return this.$message.error("Tag name cannot be empty")
      }
       try {
        this.loading = true
          const params = {
            id: item.id,
            name: item.name,
            type: item.type
          }
          const { data: response } = await editTag(params)
          if (response.code !== 0) {
            this.$message.error(response.msg)
          }
          this.$message.success(response.msg)
          this.loading = false
       } catch (error) {
        console.log("editTag",error);
        this.loading = false    
       }
    },
    async deleteTag(item){
      try {
          const params = {
            id: item.id,
          }
          const { data: response } = await deleteTag(params)
          if (response.code !== 0) {
            this.$message.error(response.msg)
          }
          this.$message.success(response.msg)
          this.dataTagList = this.dataTagList.filter(i => i.id !== item.id)
          console.log("deleteTag1",response);
    
          console.log("deleteTag",item);
            
       } catch (error) {
        console.log("deleteTag",error);
       }

    },
    onSave() {
      this.$emit('update:tags', this.dataTagList)
      bus.$emit('update:tags', this.dataTagList)
      this.visible = false
    }
  }

}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog  {
  width: 526px !important;
}
::v-deep .el-dialog__body {
    padding: 20px;
    word-break: break-word;
    border-top: 1px solid #DDE1E6;
    border-bottom: 1px solid #DDE1E6;
    overflow: auto;
    height: 573px;
}
::v-deep .el-dialog__title {
  // font-size: 18px;
  font-weight: bold;
  color: #262626;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #262626;
}
.tag_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.input {
  width: 220px;
  height: 32px;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DDE1E6;
    color: #606266;
    padding: 0 12px;
}
.cursor {
  cursor: pointer;
}

</style>
